(function () {
    /*一键回到顶部功能*/
    const scrollTop = document.getElementById("scroll-top");
    scrollTop.onclick = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        })
    }

    /*nav导航栏切换选择标签更改字体颜色*/
    const tabs = document.querySelectorAll(".nav-tabs a");
    // 循环给标签添加监听事件
    for (let i = 0; i < tabs.length; i++) {
        // 添加索引
        tabs[i].setAttribute("data-index", i.toString());
        tabs[i].addEventListener("click", () => {
            // 获取当前选中的标签的index索引
            let index = Number(tabs[i].getAttribute("data-index"));
            // console.log(index);
            // 排他思想
            for (let j = 0; j < tabs.length; j++) {
                tabs[j].className = "";
            }
            // 给当前选中的tab标签添加类
            tabs[index].className = "active";
        })
    }

    /*导航栏-location选中城市更改当前城市*/
    const position_city = document.querySelectorAll(".position-city");
    const name_city = document.querySelectorAll(".list-more .name-city");
    for (let i = 0; i < name_city.length; i++) {
        name_city[i].addEventListener("click", function () {
            console.log(this.innerHTML);
            for (let j = 0; j < position_city.length; j++) {
                position_city[j].innerHTML = this.innerHTML;
            }
        })
    }
})();


/*实现轮播图更改*/
(function () {
    const pannels = document.querySelectorAll(".h-banner .h-pannel");
    const prev = document.querySelector("#J-prev");
    const next = document.querySelector("#J-next");

    // 定义信号量
    let i = 0;

    // 注册点击事件
    next.addEventListener("click", function () {
        i++;
        // console.log(i);
        if (i >= pannels.length) {
            i = 0;
        }
        toggle();
    })
    prev.addEventListener("click", function () {
        i--;
        console.log(i);
        if (i < 0) {
            i = pannels.length - 1;
        }
        toggle();
    })

    // 声明数据渲染函数
    function toggle() {
        // console.log(i)
        // 渲染对应的数据
        for (let j = 0; j < pannels.length; j++) {
            pannels[j].classList.remove('active');
        }
        pannels[i].classList.add("active");

        // 更换当前图片的小圆点, 并删除之前图片的‘active’, 只让当前图片的属性‘current’
        document.querySelector(".h-nav .current").classList.remove('current');
        document.querySelector(`.h-nav .dot:nth-child(${i + 1})`).classList.add('current')
    }

    // 设置定时器实现自动轮播
    let timerId = setInterval(() => {
        // 利用JS自动调用点击事件
        next.click();
    }, 3000);

    // 利用鼠标事件对定时器进行开关操作
    // 1 获取元素
    const swiper = document.querySelector('#h-container')

    // 2 注册事件
    swiper.addEventListener('mouseenter', () => {
        clearInterval(timerId)
    })

    swiper.addEventListener('mouseleave', () => {
        // 关闭定时器
        clearInterval(timerId)
        // 开启定时器
        timerId = setInterval(() => {
            // 利用JS自动调用点击事件
            next.click()
        }, 3000)
    })

    // 设置点击事件点击小圆点来更换当前图片
    const dots = document.querySelectorAll(".h-nav .dot");
    // 利用for循环给小圆点添加点击事件
    for (let index = 0; index < dots.length; index++) {
        dots[index].addEventListener('click', function () {
            i = index;
            toggle();
        })
    }

})();